<!-- //设置交易密码 -->
<template>
    <div>
        <div class="header">
            <van-nav-bar title="" left-text="" right-text="完成" left-arrow @click-left="back" @click-right="sub" />
        </div>

        <van-cell class="text" :border="false" center title="设置交易密码" label="请设置交易密码，用于支付验证" />

        <div class="inputBox">
            <!-- 密码输入框 -->
            <van-password-input :value="value" :length="6" :gutter="10" :focused="showKeyboard"
                @focus="showKeyboard = true" />
            <!-- 数字键盘 -->
            <van-number-keyboard v-model="value" :maxlength="6" :show="showKeyboard" @blur="showKeyboard = false" />

        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Toast, PasswordInput, NumberKeyboard } from 'vant';
Vue.use(Toast, PasswordInput, NumberKeyboard);
import { mapMutations } from "vuex";


export default {
    name: "SetTransactionPassword",
    components: {
    },
    data() {
        return {
            value: '',
            showKeyboard: true,
            submit: false    //密码长度需达到6才能提交
        }
    },
    watch: {
        value(value) {
            if (value.length === 6) {
                this.submit = true
                console.log('可以提交密码给后台', value, this.submit);
            } else {
                this.submit = false
            }
        },
    },
    methods: {
        back() {
            this.$router.go(-1)
        },
        ...mapMutations(['setTransactionPassword']),
        sub() {   //交易密码设置完成跳转到账号与安全页面
            if (this.submit == true) {
                this.setTransactionPassword(this.value)
                let that = this
                Toast({
                    message: '设置成功',
                    duration: 1000,
                    onClose() {
                        that.$router.push({ path: '/accounts' })  //这样用this将会指向toast  ，所以用that替代this将指向sub
                    }
                })
            } else {
                Toast('请输入密码');
            }
        }
    }
}
</script>

<style scoped>
.text {
    font-size: 24px;
}

.btn {
    margin: 80px auto;
}

.inputBox {
    margin: 50px auto;
    width: 92%;
}

.van-password-input__security li {
    background-color: #f2f2f2;
}
</style>
